const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const srcRoot = path.resolve(__dirname, 'src')
const devPath = path.resolve(__dirname, 'dev')
const pageDir = path.resolve(srcRoot, 'page')
const mainFile = 'index.js'

// 生成多个入口html
function getHtmlArray(entryMap){
  let htmlArray = []
  Object.keys(entryMap).forEach(key => {
    let fullPathName = path.resolve(pageDir, key)
    let fileName = path.resolve(fullPathName, key + '.html')

    if(fs.existsSync(fileName)){
      htmlArray.push(new HtmlWebpackPlugin({
        filename: key + '.html',
        template: fileName,
        chunks: [key]
      }))
    }
  })
  return htmlArray
}

// 返回入口文件的绝对路径, 例如src/page/index/index.js
function getEntry(){
  let entryMap = {}
  fs.readdirSync(pageDir).forEach(pathname => {
    let fullPathName= path.resolve(pageDir, pathname)
    let stat = fs.statSync(fullPathName)
    let fileName = path.resolve(fullPathName, mainFile)

    if(stat.isDirectory() && fs.existsSync(fileName)){
      entryMap[pathname] = fileName
    }
  })
  return entryMap
}
const entryMap = getEntry()
console.log(entryMap)
const htmlArray = getHtmlArray(entryMap)

module.exports = {
  mode: 'development',
  entry: entryMap,
  resolve: {
    alias: {
      component: path.resolve(srcRoot, 'component')
    },
    extensions: ['.jsx', '.js']
  },
  devServer: {
    contentBase: devPath,
    hot: true
  },
  output: {
    path: devPath,
    filename: '[name].min.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'eslint-loader'
          }
        ],
        include: srcRoot
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        include: srcRoot
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader', {
          loader: 'sass-resources-loader',
          options: {
            resources: srcRoot + '/component/common.scss'
          }
        }],
        include: srcRoot
      },
      {
        test: /\.(png|jpg|jpeg)$/,
        loader: 'url-loader?limit=8192',
        include: srcRoot
      }
    ]
  },
  // optimization: {
  //   splitChunks: {
  //     cacheGroups: {
  //       common: {
  //         test: /[\\/]node_modules[\\/]/,
  //         chunks: 'all',
  //         name: 'common'
  //       }
  //     }
  //   }
  // },
  plugins: [
    ...htmlArray,
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
    // new MiniCssExtractPlugin({
    //   filename: '[name].css',
    //   chunkFilename: '[id].css'
    // })
  ]
}